<template>
  <div class="news-detail-container">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ name: 'NewsList' }">平台动态</el-breadcrumb-item>
        <el-breadcrumb-item>动态详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="detail-content">
      <h2>{{ newsDetail.title }}</h2>
      <div class="meta">
        <span class="date">发布时间：{{ newsDetail.date }}</span>
      </div>
      <div class="content">
        <p>这里是动态的详细内容。根据实际需求，这里可以展示从API获取的详细HTML内容。</p>
        <p>示例内容：本次招标项目为智能化科场改造，包括设备采购、安装调试等内容。</p>
      </div>
      <div class="attachments" v-if="newsDetail.attachments && newsDetail.attachments.length">
        <h3>附件</h3>
        <ul>
          <li v-for="(file, index) in newsDetail.attachments" :key="index">
            <el-link type="primary" :href="file.url" target="_blank">
              {{ file.name }}
            </el-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlatformNewsDetail',
  data() {
    return {
      newsDetail: {
        id: this.$route.params.id,
        title: '四川省交通建设集团有限责任公司智能化科场招标采购的公示',
        date: '2022-04-13',
        content: '这里是动态的详细内容...',
        attachments: [
          { name: '招标文件.pdf', url: '/files/sample.pdf' },
          { name: '技术规格书.docx', url: '/files/spec.docx' }
        ]
      }
    }
  },
  created() {
    // 这里可以根据路由参数id从API获取详情数据
    // this.fetchNewsDetail(this.$route.params.id)
  },
  methods: {
    fetchNewsDetail(id) {
      // 实际项目中这里调用API获取数据
      console.log('Fetching news detail for id:', id)
    }
  }
}
</script>

<style scoped>
.news-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  margin-bottom: 20px;
}

.detail-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.detail-content h2 {
  font-size: 22px;
  color: #333;
  margin-bottom: 15px;
}

.meta {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  color: #666;
}

.content {
  line-height: 1.8;
  margin-bottom: 30px;
}

.attachments h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.attachments ul {
  list-style: none;
  padding: 0;
}

.attachments li {
  margin-bottom: 8px;
}
</style>